/* 全局过渡动画效果 */

/* 淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 滑动效果 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

/* 缩放效果 */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}
.scale-enter,
.scale-leave-to {
  transform: scale(0.95);
  opacity: 0;
}

/* 列表过渡效果 */
.list-enter-active, 
.list-leave-active {
  transition: all 0.5s;
}
.list-enter, 
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 页面切换效果 */
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}
.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 按钮悬停效果 */
.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 卡片悬停效果 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 菜单项过渡 */
.el-menu-item {
  transition: all 0.3s ease;
}

/* 表单元素过渡 */
.el-input__inner,
.el-textarea__inner {
  transition: all 0.3s ease;
}

/* 路由过渡 */
.router-view-transition {
  position: absolute;
  width: 100%;
  transition: all 0.5s ease;
}

.router-view-enter {
  opacity: 0;
  transform: translateX(30px);
}

.router-view-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}